<template>
  <div class="container">
    <h1>&nbsp;</h1>
    <div class="login">
        <div class="up">
            <el-form ref="form" :model="form" >
                <el-form-item >
                    <el-input v-model="form.num" placeholder="学号"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="form.password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="form.img" placeholder="验证码"></el-input>
                </el-form-item>
                <div class="block">
                    <img :src="url" alt="">
                </div>
                <el-form-item >
                    <el-button type="primary" @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </div>
</template>

<script>



export default {
    data(){
        return {
            form:{
                //学号
                num:'',
                //密码
                password:'',
                //验证码
                img:''
            },
            //图片链接
            url:''
        }
    },
    methods:{
        //登录
        login(){
            if(this.form.num && this.form.password && this.form.img){
                this.$axios.post('/user/verifyImageCode',{imageCode:this.form.img}).then((r)=>{
                if(r.data.code === 0){
                    this.$axios.post('user/login',{
                    num:this.form.num,
                    password:this.form.password
                }).then((res)=>{
                    console.log(res)
                    if(res.data.msg === '成功'){
                        this.$message.success('登陆成功');
                        sessionStorage.setItem('token',res.data.result);
                        sessionStorage.setItem('num',this.form.num);
                        this.$router.push('/home');
                    }
                    else{
                        this.$message.error('学号或密码错误');
                    }
                    })
                }
                else{
                    this.$message.error('验证码错误或者失效');
                    this.$router.go(0);
                }
            })
            }
            else{
                this.$message('请输入完整信息')
            }
            
            
        },
        //拿验证码
        getimage(){
            //保存vue的this
            let that = this;
            var windowUrl = window.URL || window.webkitURL;//处理浏览器兼容性
            var xhr = new XMLHttpRequest();
            var url = "http://39.108.110.150:8006/Wings/user/get/imageCode";//验证码请求地址
            xhr.open("post", url, true);
            xhr.responseType = "blob";
            xhr.onload = function () {
                if (this.status == 200) {
                    var blob = this.response;
                    that.url=windowUrl.createObjectURL(blob);
                }
            }
            xhr.send({});
        },
        //判断验证码
        judge(){
            
        },
       
    },
    created(){
        this.getimage();
    }
}
</script>

<style scoped>
    
    .container{
        height: 100vh;

        background-repeat: no-repeat;
        background: #dfe8f3;
        margin: 0;
    }
    .login{
        background: #b3c0d1;
        width: 400px;
        height: 400px;
        margin: 150px auto;
        border-radius: 10px;
       
    }
    .el-input{
        width: 250px;
    }
    .up{
        position: relative;
        top: 50px;
    }
    .el-button{
        width: 250px;
    }
</style>

